<template>
  <div :data-id="data.id"></div>
</template>

<script lang="ts" setup>
interface IProps {
  data: any;
}

const { cimInstance } = window;
const mounted = ref(false);
const props = withDefaults(defineProps<IProps>(), { data: { id: '' } });

const render = () => {
  try {
    const { data, ...restData } = props.data;
    const layerData = { ...restData, ...data, name: restData.id };
    if (mounted.value) {
      cimInstance.api.updateLayerGraphics(layerData.id, layerData);
    } else {
      cimInstance.api.addLayerByType(layerData);
      mounted.value = true;
    }
  } catch (error) {
    console.log(error);
  }
};

watch(props.data, render, { deep: true, immediate: true });

onUnmounted(() => {
  cimInstance.api.destroyLayer(props.data.id);
});
</script>

<style lang="less" scoped></style>
